<template>
<div class="mainDiv" style="overflow-x: hidden;">
    <el-row :gutter="10" class="plr10">
      <el-col :span="12">
        <el-input :value="goods.name" class="mt" disabled>
            <template slot="prepend">产品名称</template>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-input :value="goods.number" class="mt" disabled>
            <template slot="prepend">产品编号</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="plr10">
      <el-col :span="12">
        <el-input v-model="goods.price" class="mt" placeholder="请输入产品价格">
            <template slot="prepend">产品价格</template>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-input v-model="goods.nums" class="mt" placeholder="请输入产品库存">
            <template slot="prepend">产品库存</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="plr10">
        <el-alert
            title="设置产品的业绩和提成比，产品通常设置个正常销售的即可"
            type="warning"
            center
            show-icon>
          </el-alert>
          <div style="padding:10px">
            <span style="color: #000;font-size: 14px;margin-right: 10px">业绩分类</span>
            <el-select style="width: 50%" v-model="selsubclass" multiple filterable allow-create @change="selectsubclass" @remove-tag="removetag"  placeholder="请选择项目下子类">
                <el-option v-for="(item,index) in cates" :label="item.name" :value="item.id" :key="index">
                </el-option>
            </el-select>
          </div>
      <div style="padding: 10px;display:flex;flex-wrap:wrap;justify-content: space-between;height: 500px;overflow: scroll;">
        <el-card class="box-card" v-for="(item, index) in subjectconfiglists" :key="index" style="width:49%;flex-shrink: 0;height:260px">
          <div slot="header" class="clearfix">
            <span>{{ item.name }}</span>
          </div>
          <el-row :gutter="10" style="display: flex;flex-direction: column">
                <div style="display: flex;color: #888888;padding: 10px;">
                  <span style="width: 45px;flex-shrink: 0;">业绩:</span>
                  <el-col :span="11">
                    <el-input v-model="item.xjyjpercent" placeholder="请输入现金业绩百分比(0-100)" size="mini">
                  <template slot="prepend">现金业绩百分比</template>
                </el-input>
                    </el-col>
                    <el-col :span="11">
                    <el-input v-model="item.khyjpercent" placeholder="请输入卡耗业绩百分比(0-100)" size="mini">
                  <template slot="prepend">卡耗业绩百分比</template>
                </el-input>
                    </el-col>
                </div>
                <el-alert
                  title="注：提成百分比是以分配的业绩为基数的，例如该条设置的业绩百分比为50%，提成百分比为50%，那么选择该条目的员工获取的提成为实际成交价 × 50% = 分配到的业绩 × 50% = 分配到的实际提成"
                  type="warning"
                  center
                  :closable="false"
                  show-icon>
                </el-alert>
                <div style="display: flex;color: #888888;padding: 10px;align-items: center;">
                  <span style="width: 45px;flex-shrink: 0;">提成:</span>
                  <el-col :span="11">
                    <el-radio-group v-model="item.xjtctype">
                  <el-radio :label="1">百分比</el-radio>
                  <el-radio :label="2">固额</el-radio>
                </el-radio-group>
                <el-input v-model="item.xjtcpercent" v-if="item.xjtctype==1" placeholder="请输入现金提成百分比(0-100)" size="mini">
                  <template slot="prepend">现金提成百分比</template>
                </el-input>
                <el-input v-model="item.xjtcfixed" v-else placeholder="请输入现金提成固额" size="mini">
                    <template slot="prepend">现金提成固额</template>
                </el-input>
                  </el-col>
                  <el-col :span="11">
                    <el-radio-group v-model="item.khtctype">
                  <el-radio :label="1">百分比</el-radio>
                  <el-radio :label="2">固额</el-radio>
                </el-radio-group>
                <el-input v-model="item.khtcpercent" v-if="item.khtctype==1" placeholder="请输入卡耗提成百分比(0-100)" size="mini">
                  <template slot="prepend">卡耗提成百分比</template>
                </el-input>
                <el-input v-model="item.khtcfixed" v-else placeholder="请输入卡耗提成固额" size="mini">
                    <template slot="prepend">卡耗提成固额</template>
                </el-input>
                  </el-col>
                 </div>
              </el-row>
        </el-card>
      </div>      
    </el-row>
    <el-row :gutter="20" type="flex" justify="center" style="margin-top: 20px;">
        <el-col :span="10">
            <el-button @click.native="close" style="width: 100%;">取消</el-button>
        </el-col>
        <el-col :span="10">
            <el-button type="success" @click.native="submit" style="width: 100%;" :loading="loading">确定</el-button>
        </el-col>
    </el-row>
  </div>
<!-- <el-row :gutter="20" style="padding: 20px 10px; margin: 0px">
	<el-form ref="form" label-width="80px" size="mini" label-position="left">
			<el-col :span="12">
				<el-form-item label="产品编号">
					<el-input :value="goods.number" disabled></el-input>
				</el-form-item>
				<el-form-item label="产品名称">
					<el-input :value="goods.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="产品价格">
					<el-input :value="goods.price" disabled></el-input>
				</el-form-item>
				<el-form-item>
				    <el-button type="primary" @click="submit">保存</el-button>
				    <el-button @click="close">取消</el-button>
				 </el-form-item>

			</el-col>
			<el-col :span="12">
				<el-form-item label="销售类型">
					<el-radio-group v-model="goods.tdtype">
						<el-radio :label="1">百分比</el-radio>
						<el-radio :label="2">固定金额</el-radio>
					</el-radio-group>
					<el-input v-model="goods.percent" placeholder="请输入销售百分比提成(0 ~ 100)" v-if="goods.tdtype==1"></el-input>
					<el-input v-model="goods.fixed" placeholder="请输入销售固定金额提成" v-else></el-input>
				</el-form-item>
				<el-form-item label="耗卡类型">
					<el-radio-group v-model="goods.khtdtype">
						<el-radio :label="1">百分比</el-radio>
						<el-radio :label="2">固定金额</el-radio>
					</el-radio-group>
					<el-input v-model="goods.khpercent" placeholder="请输入耗卡百分比提成(0 ~ 100)" v-if="goods.khtdtype==1"></el-input>
					<el-input v-model="goods.khfixed" placeholder="请输入耗卡固定金额提成" v-else></el-input>
				</el-form-item>


			</el-col>
		</el-form>
</el-row> -->
</template>
<script>
import C from '@/common/common.js'
export default {
  name: 'editGoods',
  data () {
    return {
      selsubclass: [],
      oldsubclass: [],
      cates: [],
      subjectconfiglists: [],
      oldsubjectconfiglists: [],
      goods: {
        id: '',
        name: '',
        number: '',
        price: 0,
        nums: 0
        // tdtype: 1,
        // percent: '',
        // fixed: '',
        // khtdtype: 1,
        // khpercent: '',
        // khfixed: '',
      },
      flag: true
    }
  },
  methods: {
    async submit () {
      let that = this
      let xjyjsum = []
      let khyjsum = []
      if (!/^[1-9]\d*(\.\d+)?$/.test(this.goods.price)) {
        C.error('请正确输入产品价格')
        return false
      }
      if (that.subjectconfiglists.length == 0) {
        C.error('请至少选择一个项目子类')
        return false
      }
      that.subjectconfiglists.every((v, i) => {
        // if (v.xjyjtype == 1) {
        //   v.xjyjfixed = 0
        if (!/^(\d|[1-9]\d|100)$/.test(v.xjyjpercent)) {
          C.error('请设置' + v.name + '现金业绩百分比(0-100)')
          that.flag = false
          return false
        }
        // } else {
        //   v.xjyjpercent = 0
        //   if (!/^([1-9]\d*|0)(\.\d+)?$/.test(v.xjyjfixed)) {
        //     C.error('请设置' + v.name + '现金业绩固额')
        //     that.flag = false
        //     return false
        //   }
        // }
        if (v.xjtctype == 1) {
          v.xjtcfixed = 0
          if (!/^(\d|[1-9]\d|100)$/.test(v.xjtcpercent)) {
            C.error('请设置' + v.name + '现金提成百分比(0-100)')
            that.flag = false
            return false
          }
        } else {
          v.xjtcpercent = 0
          if (!/^([1-9]\d*|0)(\.\d+)?$/.test(v.xjtcfixed)) {
            C.error('请设置' + v.name + '现金提成固额')
            that.flag = false
            return false
          }
        }
        // if (v.khyjtype == 1) {
        //   v.khyjfixed = 0
        if (!/^(\d|[1-9]\d|100)$/.test(v.khyjpercent)) {
          C.error('请设置' + v.name + '卡耗业绩百分比(0-100)')
          that.flag = false
          return false
        }
        // } else {
        //   v.khyjpercent = 0
        //   if (!/^([1-9]\d*|0)(\.\d+)?$/.test(v.khyjfixed)) {
        //     C.error('请设置' + v.name + '卡耗业绩固额')
        //     that.flag = false
        //     return false
        //   }
        // }
        if (v.khtctype == 1) {
          v.khtcfixed = 0
          if (!/^(\d|[1-9]\d|100)$/.test(v.khtcpercent)) {
            C.error('请设置' + v.name + '卡耗提成百分比(0-100)')
            that.flag = false
            return false
          }
        } else {
          v.khtcpercent = 0
          if (!/^([1-9]\d*|0)(\.\d+)?$/.test(v.khtcfixed)) {
            C.error('请设置' + v.name + '卡耗提成固额')
            that.flag = false
            return false
          }
        }
        // if (!/^(\d|[1-9]\d|100)$/.test(v.minuscost)) {
        //   C.error('请设置' + v.name + '扣除成本百分比(0-100)')
        //   that.flag = false
        //   return false
        // }
        xjyjsum.push(v.xjyjpercent)
        khyjsum.push(v.khyjpercent)
        that.flag = true
        return true
      })
      if (that.flag) {
        if (this.evil(xjyjsum.join('+')) !== 100) {
          C.error('现金业绩百分比之和必需为100')
          return false
        }
        if (this.evil(khyjsum.join('+')) !== 100) {
          C.error('卡耗业绩百分比之和必需为100')
          return false
        }
        let data = await C.ajax('/shop/goods/editgoods', { subInfo: that.goods, subConfig: that.subjectconfiglists }, 'post')
        if (data) {
          if (data.errno === 0) {
            that.loading = false
            that.$notify({
              title: '成功',
              message: data.data,
              type: 'success'
            })
            C.closeBrowserWindow(data)
          } else {
            that.loading = false
            that.$notify.error({
              title: '错误',
              message: data.errmsg
            })
          }
        }
      }
    },
    selectsubclass: async function (arr) {
      let addarr = this.filter(arr, this.oldsubclass)
      let reducearr = this.filter(this.oldsubclass, arr)
      let newArray = []
      if (addarr.length !== 0) {
        addarr.forEach((v, i) => {
          this.cates.every((k) => {
            if (k.id === v) {
              newArray.push({
                name: k.name,
                subjectchildclassid: v,
                // xjyjtype: 1,
                xjyjpercent: '',
                // xjyjfixed: '',
                xjtctype: 1,
                xjtcpercent: '',
                xjtcfixed: '',
                // khyjtype: 1,
                khyjpercent: '',
                // khyjfixed: '',
                khtctype: 1,
                khtcpercent: '',
                khtcfixed: ''
                // minuscost: ''
              })
              return false
            }
            return true
          })
        })
      }
      if (reducearr.length !== 0) {
        this.oldsubjectconfiglists.forEach((v, i) => {
          if (reducearr.indexOf(v.subjectchildclassid) !== -1) {
            this.oldsubjectconfiglists.splice(i, 1)
          }
        })
        this.oldsubclass.forEach((v, i) => {
          if (reducearr.indexOf(v) !== -1) {
            this.oldsubclass.splice(i, 1)
          }
        })
      }
      this.subjectconfiglists = this.oldsubjectconfiglists.concat(newArray)
    },
    getcates: async function () {
      let list = await C.ajax('/shop/goods/getgoodsChildClass')
      if (list) {
        this.cates = list
      }
    },
    getsubconfig: async function (id) {
      let list = await C.ajax('/shop/goods/getgoodsconfig', { subjectid: id }, 'post')
      if (list) {
        let newArray = []
        list.forEach((v, i) => {
          newArray.push(v.subjectchildclassid)
        })
        this.subjectconfiglists = list
        this.oldsubjectconfiglists = list
        this.selsubclass = newArray
        this.oldsubclass = newArray
      }
    },
    filter: function (arr1, arr2) {
      return arr1.filter((v) => {
        return arr2.indexOf(v) === -1
      })
    },
    close () {
      C.closeBrowserWindow()
    },
    evil: function (fn) {
      let Fn = Function
      return new Fn('return ' + fn)()
    }
  },
  mounted: function () {
    let row = C.getDatas()
    this.goods.id = row.subjectid
    this.goods.name = row.name
    this.goods.number = row.number
    this.goods.price = row.price
    this.goods.nums = row.nums
    this.getsubconfig(row.subjectid)
    this.getcates()
    // row.percent = Number(row.percent * 100).toFixed(0)
    // row.khpercent = Number(row.khpercent * 100).toFixed(0)
    // row.tdtype = row.tdtype == 0 ? 1 : row.tdtype
    // row.khtdtype = row.khtdtype == 0 ? 1 : row.khtdtype
    // this.goods.fixed = row.fixed
    // this.goods.percent = row.percent
    // this.goods.tdtype = row.tdtype
    // this.goods.khfixed = row.khfixed
    // this.goods.khpercent = row.khpercent
    // this.goods.khtdtype = row.khtdtype
  }
}
</script>
<style>
.mt {
  margin: 10px 0;
}
.plr10 {
  padding: 0 10px;
}
.box-card {
  margin-top: 12px;
}
.el-card__header {
  padding: 8px 20px;
}
.el-card__body {
  padding-top: 0px;
}
.el-card__body .el-row {
  padding-top: 12px;
}
</style>